<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../vueCore/vue.min.2.7.14.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <title>详情</title>
  <style>
    .about-item-content {
      height: 100% !important;
      /* min-height: 500px !important; */
    }
    .about-item-content img {
      width: 100%;
      /* height: 500px; */
      object-fit: cover;
      margin-bottom: 50px;
    }
  </style>
</head>

<body>
  <div class="about" id="root">
    <div class="container">
      <el-menu :default-active="navActive" text-color="#000" active-text-color="#409EFF" class="el-menu-demo"
        mode="horizontal">
        <el-menu-item v-for="(item, index) in nav" :key="index" :index="index + ''" class="meun-item"
          @click="toPage(item)">
          {{item.label}}
        </el-menu-item>
        <!-- <el-alert class="head-text-suc" :closable="false" :title="headText" type="success">
        </el-alert>
        <el-alert class="head-text-suc" :closable="false" title="不渝盟誓 ，情约今生" type="error">
        </el-alert>
        <span class="time">{{time}}</span> -->
      </el-menu>

      <div class="content">
        <div class="content-item about-item-content">
          <img src="./images/nav01.webp" alt="">
          <img src="./images/nav02.webp" alt="">
          <img src="./images/nav03.webp" alt="">
          <img src="./images/nav04.webp" alt="">
        </div>
      </div>



      <div class="footer">
        <!-- <el-divider content-position="left">
          快看！好多星星✨
        </el-divider>
        <div class="footer-item">
          <el-tag v-for="(item,index) in footer" :type="item.t" :key="index" style="margin-right: 10px;cursor: pointer;">
            {{item.x}}
          </el-tag>
          <el-badge :value="99" class="badge-item">
            <el-button size="small" style="width: 100%;">科技改变生活</el-button>
          </el-badge>
        </div> -->
        <div class="bottom-text">
          <p>商务合作|联系我们|加入我们</p>
          <p>Wedding Ring Network</p>
          <!-- <P>关注我们可以获得更多旅游小Tips</P> -->
          <!-- <p><a href="https://www.baidu.com/">更多旅游景区点击这里</a></p> -->
        </div>
      </div>
    </div>

    <!-- <div id="particle_container">
      <div class="particle_item1"></div>
      <div class="particle_item2"></div>
      <div class="particle_item3"></div>
    </div> -->
  </div>

  <script>

    const vm = new Vue({
      el: "#root",
      data: {
        textList: [
          '永远对美好的事情抱有期待'
        ],
        nav: [
          { label: '首页' },
          { label: '详情' },
          { label: '品牌故事' },
        ],
        footer: [
          { x: '首页', t: 'success' },
          { x: '联系我们', t: 'error' },
          { x: '关于我们', t: 'warning' },
          { x: '技术支持', t: 'info' },
          { x: '赞助👍', t: '' }
        ],
        navActive: '1',
        headText: '如果你还没下定决心，请不要送她「守护一生」',
        swiper: [
          { id: 1, src: './images/s-1.jpeg' },
          { id: 2, src: './images/s-2.jpg' },
          { id: 3, src: './images/s-3.jpg' },
        ],
        time: ''
      },
      created() {
        // this.popupNotify('欢迎来到我的空间站')
        setInterval(() => {
          this.time = new Date().toLocaleString()
        }, 1000)
      },
      methods: {
        popupNotify(message = "消息", title = "信息提示") {
          this.$notify({
            title,
            message
          });
        },
        toPage(item) {
          if (item.label === '首页') {
            window.location.href = './demo.html'
          } else {
            window.location.href = './prefecture.html'
          }
        },
      }
    })
  </script>
</body>

</html>